<template>
  <div id="" class="paT55">
    <div class="container">
      <div class="navItem" @click="clickNav(0)" :class="{'active': navIndex === 0}">监控视图</div>
      <div class="navItem" @click="clickNav(1)" :class="{'active': navIndex === 1}">数据列表</div>
      <div class="content">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      navIndex: 0
    }
  },
  methods: {
    clickNav (index) {
      this.navIndex = index
      switch (index) {
        case 0:
          this.$router.push({path: '/surveillance/video'})
          break
        case 1:
          this.$router.push({path: '/surveillance/data'})
          break
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container{
  width: 100%;
  height: calc(100% - 20px);
  /*background-color: red;*/
  box-sizing: border-box;
  padding-left: 2%;
  padding-right: 2%;
  margin: 20px 0 0 0;
}
.navItem{
  cursor: pointer;
  display: inline-block;
  margin:0 15px 0 0px;
  width:117px;
  height:40px;
  text-align: center;
  line-height: 40px;
  text-decoration: none;
  border:1px solid rgba(3,222,238,1);
  color:rgba(0,255,230,1);
  font-size: 1.6rem;
  &.active{
    -webkit-box-shadow: inset 0 0 15px #00f5ff;
    box-shadow: inset 0 0 15px #00f5ff;
  }
}
.content{
  height: calc(100% - 52px);
}
</style>
